<template>
  <div style="margin-left: 100px; margin-right: 120px">
    <!-- <p style="margin-left: 20vw; color: red; margin-top: 2vh">带*的为必选项</p> -->
    <!-- 发布信息表单 -->
    <div class="Certification_Form">
      <el-form
        ref="ensureForm"
        :model="ensureForm"
        status-icon
        label-width="8vw"
      >
        <h1>发布信息</h1>
        <el-divider content-position="center"></el-divider>
        <el-form-item
          label="收件人身份证"
          prop="idNumber"
          :rules="[
            {
              type: 'string',
              trigger: 'blur',
              required: 'true',
              pattern: /^(^\d{18}$)$/,
              message: '请输入正确的身份证号码'
            }
          ]"
        >
          <el-input
            v-model="ensureForm.idNumber"
            autocomplete="off"
            placeholder="中华人民共和国永久居住证"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="name"
          :rules="[
            {
              type: 'string',
              trigger: 'blur',
              required: 'true',
              message: '姓名不能为空'
            }
          ]"
        >
          <el-input v-model="ensureForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学生所处学段" prop="learningSection">
          <el-cascader
            v-model="learningSection"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input v-model="ensureForm.school"></el-input>
        </el-form-item>
        <el-form-item
          label="收款账户"
          prop="accountNumber"
          :rules="[
            {
              type: 'string',
              trigger: 'blur',
              required: 'true',
              pattern: /^\S||([1-9]{1})(\d{14}|\d{18})$/,
              message: '请输入正确的银行卡号码'
            }
          ]"
        >
          <el-input
            v-model="ensureForm.accountNumber"
            placeholder="15-19位卡号"
          ></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="receivingAddress">
          <el-input
            v-model="ensureForm.receivingAddress"
            placeholder="仅限云南地区"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="目标金额"
          prop="targetMoney"
          :rules="[
            {
              type: 'number',
              required: true,
              message: '金额输入有误',
              min: 0,
              max: 1000000
            }
          ]"
        >
          <el-input
            type="number"
            v-model.number="ensureForm.targetMoney"
            placeholder="数值"
          ></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicalOutlook">
          <el-select
            v-model="ensureForm.politicalOutlook"
            placeholder="请选择政治面貌"
          >
            <el-option label="中共党员" value="中共党员"></el-option>
            <el-option label="中共预备党员" value="中共预备党员"></el-option>
            <el-option label="共青团员" value="共青团员"></el-option>
            <el-option label="民革会员" value="民革会员"></el-option>
            <el-option label="民盟盟员" value="民盟盟员"></el-option>
            <el-option label="民建会员" value="民建会员"></el-option>
            <el-option label="民进会员" value="民进会员"></el-option>
            <el-option label="农工党党员" value="农工党党员"></el-option>
            <el-option label="致公党党员" value="致公党党员"></el-option>
            <el-option label="九三学社社员" value="九三学社社员"></el-option>
            <el-option label="台盟盟员" value="台盟盟员"></el-option>
            <el-option label="无党派人士" value="无党派人士"></el-option>
            <el-option
              label="群众(普通居民)"
              value="群众(普通居民)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="14">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="birthday"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item
          label="年龄"
          prop="age"
          :rules="[
            {
              type: 'number',
              required: true,
              message: '年龄不符合范围',
              min: 0,
              max: 99
            }
          ]"
        >
          <el-input
            type="number"
            v-model.number="ensureForm.age"
            autocomplete="off"
            placeholder="不满100周岁"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 13vw">
          <el-button type="primary" @click="onSubmit" style="margin-top: 20px"
            >提交申请</el-button
          >
          <el-button @click="resetFrom('ensureForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { PublishInformation } from "network/charity.js";
import { options } from "common/commonData";
import { formatDate } from "common/utils";
export default {
  data() {
    return {
      options: options,
      birthday: "",
      active: 1,
      learningSection: [],
      ensureForm: {
        idNumber: "",
        name: "",
        learningSection: "",
        school: "",
        accountNumber: "",
        receivingAddress: "",
        targetMoney: "",
        politicalOutLook: "",
        birthday: "",
        age: ""
      }
    };
  },

  methods: {
    /**
     * @author 代季盖
     */
    onSubmit() {
      // console.log(this.ensureForm);
      // for (let key in this.ensureForm) {
      //   if (this.ensureForm[key] == "") {
      //     alert("请确认信息是否无误！");
      //     return;
      //   }
      // }
      this.publishInformation(this.ensureForm);
      // this.$emit("publishResult", 2);
    },
    // 重置表单
    resetFrom(fromName) {
      this.$refs[fromName].resetFields();
    },
    //路由跳转
    toRouter(path) {
      this.$router.push(path);
      this.publishInformation();
    },
    //返回上一步
    previous() {
      this.active = this.active--;
      if (this.active-- < 0) return;
    },
    //下一步
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    /**@author 代季盖 */
    publishInformation(form) {
      PublishInformation(form)
        .then(res => {
          // console.log(res);
          if (res.msg == "success") {
            form.recipientId=form.idNumber.substring(form.idNumber.length-6,form.idNumber.length)+form.accountNumber.substring(form.accountNumber.length-4,form.accountNumber.length);
            form.active=2;
            this.$emit("publishResult",form);
            this.$router.push({
              query: {
                id:  form.recipientId
              }
            });
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  watch: {
    learningSection() {
      let str = this.learningSection.join("");
      if (str) {
        this.ensureForm.learningSection = str;
      }
    },
    birthday() {
      let d = this.birthday;
      try {
        this.ensureForm.birthday = formatDate(d, "yyyy-MM-dd");
      } catch (error) {}
    }
  }
};
</script>
<style lang="scss" scoped>
.step {
  margin-right: 50px;
  border: 2px solid gray;
  padding: 10px;
  border-radius: 5px;
  background-color: rgb(236, 196, 163);
}
.el-input__inner {
  width: 20vw;
}
.Certification_Form {
  width: 50vw;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  box-shadow: 0px 0px 8px rgb(200, 192, 184);
  margin-left: 13vw;
  margin-top: 2vh;
  padding: 20px;
  margin-bottom: 10px;
  padding-top: 2vh;
  .el-form-item {
    display: inline-block;
  }
}
</style>
